<template>
  <div id="my-privacy-agreement">
    <el-checkbox class="my-checkbox" v-model="isAgree"></el-checkbox>
    <span @click="openMyPrivacyAgreementDialog">《可可商城-用户隐私协议》</span>
    <my-privacy-agreement-dialog ref="my-privacy-agreement-dialog"/>
  </div>
</template>

<script>
import MyPrivacyAgreementDialog from './MyPrivacyAgreementDialog'
export default {
  name: 'MyPrivacyAgreement',
  components: {MyPrivacyAgreementDialog},
  props: {
    callback:Function
  },
  data:function(){
    return {
      isAgree:false
    }
  },
  watch:{
    isAgree:function () {
      if (this.isAgree){
        localStorage.setItem('MyPrivacyAgreement','1')
      }else{
        localStorage.removeItem('MyPrivacyAgreement')
      }
      this.$props.callback(this.isAgree)
    }
  },
  destroyed () {
    this.bus.$off('MyPrivacyAgreementCallBus')
  },
  mounted () {
    let $this = this
    $this.bus.$on('MyPrivacyAgreementCallBus', function () {
      if (localStorage.getItem('MyPrivacyAgreement') === '1') {
        $this.isAgree = true
      } else {
        $this.isAgree = false
      }
      $this.$forceUpdate()
    })
  },
  methods:{
    openMyPrivacyAgreementDialog:function () {
      this.$refs['my-privacy-agreement-dialog'].open()
    }
  }
}
</script>

<style>
  #my-privacy-agreement{ display: inline-block;}
  #my-privacy-agreement{}


  .my-checkbox .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
    background-color: #409EFF;
    border-color: #409EFF;
  }
</style>
